<template>
    <div class="liveList page">
        <formHeader :title="'全部直播'"></formHeader>
        <cube-scroll
                ref="scroll"
                :data="liveList"
                @pulling-up="getList()"
                :options="options">
            <div class="list">
                <div class="item" v-for="item of liveList" :key="item.id" @click="turn(item.id)">
                    <div class="img"><img :src="imgH+item.img" alt=""></div>
                    <div class="cover">
                        <img v-if="item.flag" src="./living.png">
                        <img v-else src="./over.png">
                    </div>
                    <div class="name">{{item.theme}}</div>
                    <div class="per" v-if="item.shopEntity">
                        <div class="ava">
                            <img v-if="item.shopEntity" :src="imgH+item.shopEntity.avatar">
                            <img v-else src="./sjyx.png">
                        </div>
                        <div class="desc">{{item.shopEntity.name}}</div>
                    </div>
                    <div class="per" v-if="!item.shopEntity">
                        <div class="ava">
                            <img  src="./sjyx.png">
                        </div>
                        <div class="desc">社集优选旗舰店</div>
                    </div>
                </div>
            </div>
        </cube-scroll>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import {getLiveList} from '@/api/live'
    export default {
        name: "liveList",
        components:{formHeader},
        data(){
            return{
                options:{pullUpLoad: true},
                liveList:[],
                page:1,
                imgH:process.env.VUE_APP_IMG_DOMAIN,
            }
        },
        activated() {
            this.getList()
        },
        methods:{
            getList(){
                getLiveList(this.page).then(res=>{
                    this.liveList=this.page==1?res.data:this.liveList.concat(res.data)
                    this.page++
                    console.log(this.liveList)
                })
            },
            turn(id){
                this.$router.push({
                    path:'/live',
                    query:{id}
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
.liveList
    background-color: #F0F5F5
    height 100%
    .list
        display flex
        flex-wrap wrap
        padding 12px
        padding-top 60px
        justify-content space-between
        .item
            background-color: #fff
            border-radius: 8px;
            padding-bottom 12px
            position relative
            margin-bottom 8px
            .img
                width  171.5px
                height 120px
                img
                    border-radius: 8px 8px 0 0;
                    width  171.5px
                    height 120px
            .cover
                position absolute
                width  171.5px
                height 120px
                top: 0
                left: 0
                border-radius: 8px 8px 0 0;
                background: rgba(0, 0, 0, 0.5);
                img
                    width: 50px
                    height: 16px
                    margin 10px
            .name
                width: 148px;
                height: 42px;
                font-size: 15px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #303333;
                line-height: 21px;
                margin 8px 0 0 12px
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
            .per
                display flex
                margin 9px 0 0 12px
                align-items center
                .ava
                    width: 20px
                    height: 20px
                    border-radius 25%
                    img
                        width: 20px
                        height: 20px
                        border-radius 50%
                .desc
                    width: 70px;
                    height: 14px;
                    font-size: 10px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #909999;
                    line-height: 14px;
                    margin-left 5px
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
</style>